<template>
  <div class="p-8">
    <div class="max-w-6xl mx-auto space-y-8">
      <!-- 头部区域 -->
      <div class="flex items-center justify-between mb-8">
        <div>
          <h1 class="text-3xl font-bold text-gray-800">4gl辅助</h1>
          <p class="mt-2 text-gray-600">选择以下功能模块，快速开始您的开发工作</p>
        </div>
      </div>

      <!-- 功能卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div
          v-for="(feature, index) in features"
          :key="index"
          @click="handleFeatureClick(feature)"
          class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] cursor-pointer border border-gray-100"
        >
          <div class="p-6">
            <!-- 图标和标题区 -->
            <div class="flex items-center mb-4">
              <div class="p-3 bg-indigo-50 rounded-lg group-hover:bg-indigo-100 transition-colors">
                <component :is="feature.icon" class="h-6 w-6 text-indigo-600" />
              </div>
              <h3 class="text-lg font-semibold text-gray-800 ml-4 group-hover:text-indigo-600">
                {{ feature.title }}
              </h3>
            </div>
            
            <!-- 描述文本 -->
            <p class="text-gray-600 text-sm leading-relaxed">{{ feature.description }}</p>
            
            <!-- 底部操作区 -->
            <div class="mt-4 flex items-center text-indigo-600">
              <span class="text-sm font-medium">立即使用</span>
              <i class="ri-arrow-right-line ml-2 group-hover:translate-x-1 transition-transform"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速入门指南 -->
      <div class="mt-12">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">快速入门</h2>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="flex items-start">
              <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-50 text-blue-600">
                  <i class="ri-file-list-line text-xl"></i>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-medium text-gray-800">选择模块</h3>
                <p class="mt-2 text-sm text-gray-600">根据您的需求选择合适的代码生成模块</p>
              </div>
            </div>
            <div class="flex items-start">
              <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-green-50 text-green-600">
                  <i class="ri-settings-line text-xl"></i>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-medium text-gray-800">配置参数</h3>
                <p class="mt-2 text-sm text-gray-600">填写必要的配置信息和参数设置</p>
              </div>
            </div>
            <div class="flex items-start">
              <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-purple-50 text-purple-600">
                  <i class="ri-code-box-line text-xl"></i>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-medium text-gray-800">生成代码</h3>
                <p class="mt-2 text-sm text-gray-600">一键生成标准化的代码模板</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { 
  Terminal, 
  FileText, 
  Code
} from 'lucide-vue-next'

const router = useRouter()

const features = [
  { 
    title: "T100相关内容", 
    icon: Terminal, 
    description: "快速生成T100相关代码，提高开发效率。支持数据库操作、查询API、表单维护等多种类型代码生成。",
    route: "/t100"
  },
  { 
    title: "GP相关内容", 
    icon: Code, 
    description: "轻松创建GP相关代码，简化开发流程。支持单据API、查询API、单双档模块等多种功能代码生成。",
    route: "/gp"
  },
  { 
    title: "JSON转Record", 
    icon: FileText, 
    description: "将JSON数据结构转换为4GL Record格式，支持复杂的嵌套结构，自动处理数据类型映射。",
    route: "/json-to-record"
  },
  {
    title: "4gl-error-code",
    icon: Code,
    description: "4gl 错误代码查询",
    route: "/error-messages"
  }
]

const handleFeatureClick = (feature) => {
  router.push(feature.route)
}
</script>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>